<template>
    <div>
        <el-dialog
            :before-close="closeDialog"
            :visible.sync="localFormVisible"
            title="选择员工"
            width="47%"
            append-to-body
        >
            <el-transfer
                v-model="value"
                :button-texts="['取消', '选择']"
                :data="transferData"
                :style="{ height: '300px' }"
                :titles="['当前可订餐员工', '当前已选择员工']"
            ></el-transfer>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">关闭</el-button>
                <el-button type="primary" @click="saveEmp">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "OrderEmp",
    data() {
        return {
            value: [], // 选择的员工的ID,key
            transferData: [], // 所有可选员工数据
            localFormVisible: this.formVisible,
        };
    },
    props: {
        formVisible: {
            type: Boolean,
            default: false
        },
        empList: {  // 新增：接收父组件传来的已选中员工列表
            type: Array,
            default: () => []
        }
    },
    methods: {
        closeDialog() {
            this.localFormVisible = false;
            this.$emit('update:formVisible', false);
        },
        getEmpList() {
            let deptId = this.$store.state.user.deptId;
            this.$http.post('/getEmpNotOrder/' + deptId).then(res => {
                // 从服务器获取未订餐员工,返回的员工数据通过 map 方法转化为一个新数组 availableEmpList，
                // 每个员工对象包含 key（员工 ID）和 label（员工姓名）
                const availableEmpList = res.data.map(emp => ({
                    key: emp.empId,
                    label: emp.empName
                }));
                // 父组件传入的已选员工 empList 转化为员工 ID 数组，在穿梭框中标记哪些员工已经被选择。
                this.value = this.empList.map(emp => emp.empId);

                // 过滤可选员工,使用 Set 数据结构创建已选员工 ID 的集合 empListIds，然后通过 filter 方法从 availableEmpList 中筛选出那些不在已选员工中的可选员工，避免重复。
                //.has()是Set对象的一个方法，检查集合中是否存在某个值，如果存在则返回true，否则返回false
                const empListIds = new Set(this.value); // 已选员工的 empId 集合,set集合,无序,去重
                //过滤掉已选员工中重复的员工ID
                const filteredAvailableEmpList = availableEmpList.filter(emp => !empListIds.has(emp.key));

                // 设置穿梭框数据，最终去除重复员工,将过滤后的可选员工和已选员工合并成一个新的数组 transferData
                this.transferData = [
                    ...filteredAvailableEmpList,
                    ...this.empList.map(emp => ({
                        key: emp.empId,
                        label: emp.empName
                    }))
                ];
            }).catch(() => {
                this.$message.error('获取员工列表失败，请联系管理员');
            });
        },
        //保存选中的员工
        saveEmp() {
            this.$emit('submitForm', this.value.map(key => {
                return this.transferData.find(item => item.key === key);
            }));
            this.closeDialog();
        },
    },
    created() {
        this.getEmpList();
    },
    watch: {
        formVisible(newVal) {
            this.localFormVisible = newVal;
        },
        empList: {
            handler(newList) {
                // 每当 empList 改变时，更新穿梭框数据
                this.value = newList.map(emp => emp.empId); // 更新已选员工
                this.getEmpList(); // 更新可选员工数据
            },
            immediate: true // 组件加载时也执行
        }

    }
}
</script>
